<template>
    <div class="orderDetail">
        <div class="goBakc">
            <el-button type="text" icon="el-icon-arrow-left" @click="handleIsDetails">返回</el-button>
            <label>订单详情</label>
        </div>

        <div class="detailWarp">
            <el-row>
                <el-col :span="10" class="rowCol10">
                    <div class="colHead">
                        <span>订单信息</span>
                    </div>
                    <div class="colDetail">
                        <!--待付款-->
                        <p>订单编号：{{orderDetail.orderNo}}</p>
                        <p>下单时间：{{orderDetail.createTime}}</p>
                        <!--交易成功-->
                        <p v-if="orderDetail.status === 2">付款时间：{{orderDetail.titleList[0].children[0].payTime}}</p>
                        <!--交易关闭-->
                        <p v-if="orderDetail.status === 3 || orderDetail.status === 4">
                            结束时间：{{currentTime?currentTime:orderDetail.titleList[0].children[0].lastTime}}</p>
                        <p>商家：{{orderDetail.titleList[0].titleList}}</p>
                    </div>
                </el-col>
                <el-col :span="14" class="rowCol14">
                    <div class="orderTransition">
                        <div class="icon">
                            <i class="el-icon-warning"></i>
                        </div>
                        <div class="transition">
                            <h3 v-if="orderDetail.status === 1">订单状态：商品已拍下，等待买家付款</h3>
                            <h3 v-if="orderDetail.status === 2">交易成功</h3>
                            <h3 v-if="orderDetail.status === 3">交易关闭</h3>
                            <h3 v-if="orderDetail.status === 4">已到期</h3>
                            <!--待付款-->
                            <p v-if="orderDetail.status === 1">
                                您还有
                                <label>00小时{{countDown.minute}}分{{countDown.second}}秒</label>
                                来付款，超时订单将自动关闭
                            </p>
                            <p v-if="orderDetail.status === 1">您可以：
                                <el-button type="primary" size="mini" @click="handleContinueBuy">付款</el-button>
                                <el-button type="text" style="color:rgba(227,36,36,1);" @click="handleDeleteOnOrder">
                                    取消订单
                                </el-button>
                            </p>
                            <!--交易关闭-->
                            <p v-if="orderDetail.status === 3">
                                原因：订单取消
                            </p>
                            <p v-if="orderDetail.status === 4">
                                原因：已到续费期
                            </p>
                            <!--交易成功-->
                            <p v-if="orderDetail.status == 4 || orderDetail.status == 3">
                                您可以：
                                <el-button type="text" @click="handleContinueBuy">再次购买</el-button>
                            </p>


                        </div>

                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="shopDetail">
            <div class="inner">
                <el-row class="shopHeader">
                    <el-col :span="8">
                        <label>商品</label>
                    </el-col>
                    <el-col :span="8">
                        <label>单价</label>
                    </el-col>
                    <el-col :span="8">
                        <label>数量</label>
                    </el-col>
                    <el-col :span="4" v-if="false">
                        <label>状态</label>
                    </el-col>
                </el-row>
                <template v-for="item in orderDetail.titleList">
                    <el-row class="shopConten" v-for="list in item.children">
                        <el-col :span="8">
                            <div class="warp">
                                <div class="cover">
                                    <el-image :src="list.commodityImgurl?BaseUrl+list.commodityImgurl:src"></el-image>
                                </div>
                                <div class="warptext">
                                    <h3>{{item.titleList}}</h3>
                                    <p v-if="list.beOverdue == 1">服务方式：免费</p>
                                    <p v-if="list.beOverdue == 2">服务方式：包月</p>
                                    <p v-if="list.beOverdue == 3">服务方式：包年</p>
                                    <P v-if="list.subjectName">
                                        <span>{{list.subjectName}}</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>{{list.gradeName}}</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>{{list.versionName}}</span>
                                    </P>
                                </div>

                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="modes">
                                <div class="textBox">
                                    <label>&yen; {{list.projecetPrice}}</label>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="modes">
                                <div class="textBox">
                                    <label>{{list.payCount}}</label>
                                </div>
                            </div>
                        </el-col>
<!--                        <el-col :span="4" v-if="false">-->
<!--                            <div class="modes">-->
<!--                                <div class="textBox">-->
<!--                                    <label>未付款</label>-->
<!--                                    <p>24小时43分26秒</p>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </el-col>-->
                    </el-row>
                </template>
            </div>
        </div>

        <div class="totalwarp">
            <div class="total">
                <p v-if="orderDetail.status === 1">状态：待支付</p>
                <p v-if="orderDetail.status === 2">状态：交易成功</p>
                <p v-if="orderDetail.status === 3">状态：交易关闭</p>
                <p v-if="orderDetail.status === 4">状态：已到期</p>
                <p>商品总价：&yen; {{orderDetail.totalPrice}}</p>
                <p>需付款：<label>&yen; {{orderDetail.totalPrice}}</label></p>
            </div>
        </div>

    </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
